﻿@{
    ViewBag.Title = "HouseMessage";
    Layout = "~/Views/Shared/Template.cshtml";
}
<link href="~/Content/jquery.slideBox.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Content/jquery.slideBox.js"></script>
<script src="~/Content/pic_tab.js"></script>
<!--底部轮播样式-->
<style type="text/css">
    .ban {
        width: 500px;
        height: 200px;
        position: relative;
        overflow: hidden;
        margin: 40px auto 0 auto;
    }

    .ban2 {
        width: 600px;
        height: 500px;
        position: relative;
        overflow: hidden;
    }

        .ban2 ul {
            position: absolute;
            left: 0;
            top: 0;
        }

            .ban2 ul li {
                width: 600px;
                height: 500px;
            }


    .num {
        height: 150px;
        overflow: hidden;
        width: 600px;
        position: relative;
        float: left;
    }

    .min_pic {
        padding-top: 10px;
        width: 500px;
    }

    .num ul {
        position: absolute;
        left: 0;
        top: 0;
    }

        .num ul li {
            width: 151px;
            height: 151px;
            margin-right: 5px;
            padding: 1px;
        }

            .num ul li.on {
                border: 2px solid #ff0000;
                padding: 0;
            }

    .prev_btn1 {
        width: 16px;
        text-align: center;
        height: 18px;
        margin-top: 40px;
        margin-right: 20px;
        cursor: pointer;
        float: left;
    }

    .next_btn1 {
        width: 16px;
        text-align: center;
        height: 18px;
        margin-top: 40px;
        cursor: pointer;
        float: right;
    }
</style>

<!--头部轮播样式-->
<style>
    .items img {
        width: 560px;
        height: 450px;
    }

    .clearfix table {
        font-size: 20px;
    }

    .clearfix td {
        padding-left: 30px;
        padding-top: 10px;
    }

    hahaha {
        color: #808080;
    }

    #demo4 img {
        width: 200px;
        height: 200px;
    }
    /*读取到的数据  换个颜色*/
    .jiben {
        color: #66ccff;
    }
</style>
<script>
    jQuery(function ($) {
        $('#demo4').slideBox({
            delay: 2,//滚动延迟时间，单位：秒
            hideBottomBar: true//隐藏底栏
        });
        $('#demo1').slideBox();
        $('#demo3').slideBox({
            duration: 0.3,//滚动持续时间，单位：秒
            easing: 'linear',//swing,linear//滚动特效
            delay: 2.4,//滚动延迟时间，单位：秒
            hideClickBar: false,//不自动隐藏点选按键
            clickBarRadius: 10
        });
    });

</script>


<!--头部  信息介绍-->
<div class="bgcSil" style="background-color: red">
    <div class="page">
        <div style=" height: 210px; background-image: url('../../images/Bagimg1.png'); ">
        </div>
        <div class="right-window"></div>
    </div>
</div>


<div class="bgcSil overHid pr">
    <div class="right-window"></div>

    <div class="container huobanwork">
        房源基本信息
    </div>

    <div class="clearfix container">
        <div class="select-title">
            <div class="select-quyu">
                <h2>
                    @foreach (var io in ViewBag.list)
                    {
                        <label style="display:none" id="qq">@io.House_Id</label>
                        <span>@io.House_Type</span>
                        <span>@io.House_Name</span>
                    }
                </h2>
            </div>
        </div>
        <div style="float:left;">
            <!--轮播吐区域-->
            <div id="demo3" class="slideBox">
                <ul class="items">
                    <li><a href="http://www.jq22.com/" title="这里是测试标题一"><img src="~/imges/bgfw_17.png"></a></li>
                    <li><a href="http://www.jq22.com/" title="这里是测试标题二"><img src="~/imges/bgfw_21.png"></a></li>
                    <li><a href="http://www.jq22.com/" title="这里是测试标题三"><img src="~/imges/bgfw_27.png"></a></li>
                    <li><a href="http://www.jq22.com/" title="这里是测试标题四"><img src="~/imges/bgfw_28.png"></a></li>
                    <li><a href="http://www.jq22.com/" title="这里是测试标题五"><img src="~/imges/bgfw_19.png"></a></li>
                </ul>
            </div>
        </div>
        <!--价格区域-->

        <div style="background-color:#ffffff; height:450px; width:575px; position:absolute; left:580px;">
            <div style="margin-top:15px; font-size:18px; margin-left:20px;">
                @foreach (var io in ViewBag.list)
                {
                    <!--数据转换   保留两位小数-->
                    double Money = Convert.ToDouble(@io.House_Price / @io.House_Area);
                    string RHMoney = String.Format("{0:F}", Money);
                    <!--转换结束-->
                    <p>
                        租 &nbsp; <span style="color:red; font-size:large;"> @io.House_Price  </span> 千元/月 &nbsp; &nbsp; &nbsp; <i class="point icon-RMB"></i>
                    </p>
                    <br /><br />
                    <p>面积 &nbsp; &nbsp; <span class="ui-text-blue"> @io.House_Area m² </span>  </p>
                    <br />
                    <p>地址 ：@io.House_Address  @io.House_Intro</p>
                    <br />
                    <p> 租期 ： 免租期: <span> @io.House_FreeLease</span>个月</p>
                    <br />
                    <p> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;最早可租日期：<span> @io.House_EarlyRentDate</span> &nbsp; &nbsp;</p>
                    <br />
                    <p> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;最短租期：<span>@io.House_ShortRentDate </span>年 &nbsp; &nbsp;</p>
                }
            </div>
        </div>
        <!--基本信息区域-->
    </div>
    <div class="clearfix container" style="background-color:#ffffff; width:1140px; margin-top:30px;">
        <p class="p-title">基本信息 :</p>
        <div class="clearfix">
            <div class="fl base-message-text">
                <table class="table table">
                    @foreach (var io in ViewBag.list)
                    {
                        <tr>
                            <td>物业费 :</td>
                            <td class="jiben">0.69元/m²/天</td>
                            <td>取暖费 :</td>
                            <td class="jiben">0元/m² </td>
                        </tr>
                        <tr>
                            <td>楼层 :</td>
                            <td class="jiben">共 @io.House_FloorCount 层</td>
                            <td>层高 :</td>
                            <td class="jiben">@io.House_FloorHigh 米</td>
                        </tr>
                        <tr>
                            <td>地面 :</td>
                            <td class="jiben">地胶</td>
                            <td>交房时间 :</td>
                            <td class="jiben">现房</td>
                        </tr>
                        <tr>
                            <td>墙壁 :</td>
                            <td class="jiben">白色乳胶漆</td>
                            <td>天棚 :</td>
                            <td class="jiben">矿棉板格栅灯</td>
                        </tr>
                        <tr>
                            <td>网络 :</td>
                            <td class="jiben">电信，联通，移动接网入户</td>
                            <td>装修情况 :</td>
                            <td class="jiben"> @io.House_Decorate</td>
                        </tr>
                        <tr>
                            <td>联系人 :</td>
                            <td class="jiben">@io.House_Person</td>
                            <td>联系方式 :</td>
                            <td class="jiben">@io.House_Telphone</td>
                        </tr>
                    }
                </table>
            </div>

            <div class="appointment" style="margin-left:400px; margin-top:15px;">
                <div style="margin-left:300px;">
                    <table id="tab">
                        <tr>
                            <td><input type="text" id="Phone" placeholder="联系电话" style="width:250px; height:40px; border-radius:10px;" /></td>
                        </tr>
                        <tr>
                            <td><input type="text" placeholder="验证码" style="width:150px; height:40px; border-radius:10px;" /><button onclick="CAPTCHA()" class="btn btn-default" style="border-radius:10px;">获取验证码</button></td>
                        </tr>
                        <tr>
                            <td><button style="width:250px; height:42px; border-radius:10px;" id="lijiyuyue" class="btn btn-success">立即预约</button></td>
                        </tr>
                        <tr>
                            <td><hr /></td>
                        </tr>
                    </table>
                    <div>
                        <table>
                            <tr>
                                <td><img src="~/images/tel_03.jpg" /></td>
                                <td>
                                    24小时客服电话
                                    <p>400-866-0164</p>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix container" style="background-color:#ffffff; width:1140px; margin-top:30px;">
        <!--我用来获取数据用的-->
        <input type="hidden" id="GetLoginName" value="@Session["LoginUserName"]" />
        <p class="p-title">热门推荐 :</p>
        <div>
            <!--轮播内容-->
            <div class="ban" id="demo101">
                <div class="min_pic">
                    <div class="num clearfix" id="ban_num1">
                        <ul>
                            <li><a href="javascript:;"><img src="~/images/bgfw_17.png" width="150" height="150" /></a></li>
                            <li><a href="javascript:;"><img src="~/images/bgfw_14.png" width="150" height="150" /></a></li>
                            <li><a href="javascript:;"><img src="~/images/bgfw_21.png" width="150" height="150" /></a></li>
                            <li><a href="javascript:;"><img src="~/images/bgfw_28.png" width="150" height="150" /></a></li>
                            <li><a href="javascript:;"><img src="~/images/bgfw_27.png" width="150" height="150" /></a></li>
                            <li><a href="javascript:;"><img src="~/images/bgfw_17.png" width="150" height="150" /></a></li>
                            <li><a href="javascript:;"><img src="~/images/bgfw_17.png" width="150" height="150" /></a></li>
                            <li><a href="javascript:;"><img src="~/images/bgfw_17.png" width="150" height="150" /></a></li>
                            <li><a href="javascript:;"><img src="~/images/bgfw_17.png" width="150" height="150" /></a></li>
                            <li><a href="javascript:;"><img src="~/images/bgfw_17.png" width="150" height="150" /></a></li>
                            <li><a href="javascript:;"><img src="~/images/bgfw_17.png" width="150" height="150" /></a></li>
                            <li><a href="javascript:;"><img src="~/images/bgfw_17.png" width="150" height="150" /></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--代码块结束-->
        </div>
    </div>
</div>

@*//预约判断*@
<script>
    function CAPTCHA() {

        var Phone = $("#Phone").val();
        var reg = /^((\+?86)|(\+86))?(13[0123456789][0-9]{8}|15[012356789][0-9]{8}|17[7][0-9]{8}|18[023456789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;

        if (!reg.test(Phone) || Phone == null || Phone == "") {
            $("#append").empty();
            $("#tab").append("<tr id='append'><td style='color:red'>请输入正确的手机号!</td></tr>");
        }
        else {
            $("#append").empty();
        }
    }


</script>
@*//预约 判断是否登录!*@
<script>
    $("#lijiyuyue").click(function () {
        var Name = $("#GetLoginName").val();
        if (Name == "" || Name == null) {
            alert("请先登录!");

        }
        else {
            //暂时未写
        }
    })
</script>


@*//底部轮播*@
<script>
    jq(function () {
        jq('#demo1').banqh({
            box: "#demo101",//总框架
            pnum: "#ban_num1",//小图框架
            prev_btn: "#prev_btn1",//小图左箭头
            next_btn: "#next_btn1",//小图右箭头
            pop_prev: "#prev2",//弹出框左箭头
            pop_next: "#next2",//弹出框右箭头
            pop_pic: "#ban_pic2",//弹出框图片框架
            pop_xx: ".pop_up_xx",//关闭弹出框按钮
            mhc: ".mhc",//朦灰层
            autoplay: true,//是否自动播放
            interTime: 2000,//图片自动切换间隔
            delayTime: 2000,//切换一张图片时间
            pop_delayTime: 2000,//弹出框切换一张图片时间
            order: 0,//当前显示的图片（从0开始）
            mindire: true,//小图滚动方向（true为水平方向滚动）
            min_picnum: 3,//小图显示数量
        })
    })

</script>
@*//预约*@
<script>
    $("#lijiyuyue").click(function () {
        var House_Ids = $("#qq").text();
        $.ajax({
            type: "post",
            url: "/HouseMessage/Appointment",
            data: { House_Id: House_Ids },

            success: function (obj) {
                if (obj == 1) {
                    alert('预约成功');
                    location.href = "/UserCenter/SeeHouse";
                }
                else if (obj == 2) {
                    alert('已经预约了');
                }
                else {
                    alert('预约失败')
                }
            }

        })
    })
</script>
